86:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/35m4vqxcs65-t.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1dwxre2ob1wlz.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/35m4vqxcs65-t.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1dwxre2ob1wlz.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 88:T26c1,[V0_FILE]typescriptreact:file="canvas-drawing-app.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useRef, useState, useEffect } from "react" import { Pencil, Disc, Eraser, ArrowRight, ChevronDown, Palette } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" type Tool = "pencil" | "oval" | "arrow" interface DrawnItem { id: number type: Tool path: { x: number; y: number }[] color: string } function catmullRomSpline(p0: number, p1: number, p2: number, p3: number, t: number): number { const v0 = (p2 - p0) * 0.5 const v1 = (p3 - p1) * 0.5 return (2 * p1 - 2 * p2 + v0 + v1) * t * t * t + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t * t + v0 * t + p1 } const predefinedColors = [ "#000000", // Black "#FF0000", // Red "#00FF00", // Green "#0000FF", // Blue "#FFFF00", // Yellow "#FF00FF", // Magenta "#00FFFF", // Cyan "#FFA500", // Orange "#800080", // Purple "#008000", // Dark Green ] function ColorPicker({ selectedColor, onColorChange, }: { selectedColor: string; onColorChange: (color: string) => void }) { return (

{predefinedColors.map((color) => (

) } export default function CanvasDrawingApp() { const canvasRef = useRef(null) const [selectedTool, setSelectedTool] = useState("pencil") const [isDrawing, setIsDrawing] = useState(false) const [drawnItems, setDrawnItems] = useState([]) const [currentItem, setCurrentItem] = useState(null) const [hoveredItem, setHoveredItem] = useState(null) const [selectedColor, setSelectedColor] = useState("#000000") useEffect(() => { const canvas = canvasRef.current if (canvas) { const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight - 60 } resizeCanvas() window.addEventListener("resize", resizeCanvas) return () => window.removeEventListener("resize", resizeCanvas) } }, []) useEffect(() => { redrawCanvas() }, [drawnItems, currentItem, hoveredItem]) const redrawCanvas = () => { const canvas = canvasRef.current const ctx = canvas?.getContext("2d") if (ctx && canvas) { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.lineWidth = 8 ctx.lineCap = "round" ctx.lineJoin = "round" drawnItems.forEach((item) => { ctx.strokeStyle = item.color || "#ef4444" drawItem(ctx, item) if (hoveredItem === item.id) { drawDeleteButton(ctx, item) } }) if (currentItem) { ctx.strokeStyle = currentItem.color || "#ef4444" drawItem(ctx, currentItem) } } } const drawItem = (ctx: CanvasRenderingContext2D, item: DrawnItem) => { ctx.beginPath() if (item.type === "pencil") { if (item.path.length < 4) { ctx.moveTo(item.path[0].x, item.path[0].y) item.path.forEach((point) => ctx.lineTo(point.x, point.y)) } else { ctx.moveTo(item.path[0].x, item.path[0].y) for (let i = 0; i < item.path.length - 3; i++) { const p0 = i > 0 ? item.path[i - 1] : item.path[0] const p1 = item.path[i] const p2 = item.path[i + 1] const p3 = item.path[i + 2] for (let t = 0; t < 1; t += 0.1) { const x = catmullRomSpline(p0.x, p1.x, p2.x, p3.x, t) const y = catmullRomSpline(p0.y, p1.y, p2.y, p3.y, t) ctx.lineTo(x, y) } } } } else if (item.type === "oval") { if (item.path.length >= 2) { const [start, end] = item.path const width = Math.abs(end.x - start.x) const height = Math.abs(end.y - start.y) ctx.ellipse((start.x + end.x) / 2, (start.y + end.y) / 2, width / 2, height / 2, 0, 0, 2 * Math.PI) } } else if (item.type === "arrow") { if (item.path.length >= 2) { const [start, end] = item.path ctx.moveTo(start.x, start.y) ctx.lineTo(end.x, end.y) const angle = Math.atan2(end.y - start.y, end.x - start.x) ctx.lineTo(end.x - 15 * Math.cos(angle - Math.PI / 6), end.y - 15 * Math.sin(angle - Math.PI / 6)) ctx.moveTo(end.x, end.y) ctx.lineTo(end.x - 15 * Math.cos(angle + Math.PI / 6), end.y - 15 * Math.sin(angle + Math.PI / 6)) } } ctx.stroke() } const drawDeleteButton = (ctx: CanvasRenderingContext2D, item: DrawnItem) => { const x = item.path[0].x const y = item.path[0].y ctx.fillStyle = "#ef4444" ctx.beginPath() ctx.arc(x, y, 10, 0, 2 * Math.PI) ctx.fill() ctx.fillStyle = "white" ctx.font = "bold 16px sans-serif" ctx.textAlign = "center" ctx.textBaseline = "middle" ctx.fillText("×", x, y) } const startDrawing = (e: React.MouseEvent) => { const canvas = canvasRef.current if (canvas) { const rect = canvas.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const clickedDeleteButton = drawnItems.find((item) => { if (hoveredItem === item.id) { const deleteX = item.path[0].x const deleteY = item.path[0].y return Math.sqrt((x - deleteX) ** 2 + (y - deleteY) ** 2) <= 10 } return false }) if (clickedDeleteButton) { setDrawnItems(drawnItems.filter((item) => item.id !== clickedDeleteButton.id)) setHoveredItem(null) return } setIsDrawing(true) const newItem: DrawnItem = { id: Date.now(), type: selectedTool, path: [{ x, y }], color: selectedColor } setCurrentItem(newItem) } } const draw = (e: React.MouseEvent) => { if (!isDrawing || !currentItem) { handleHover(e) return } const canvas = canvasRef.current if (canvas) { const rect = canvas.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top let newPath if (currentItem.type === "pencil") { newPath = [...currentItem.path, { x, y }] } else { newPath = [currentItem.path[0], { x, y }] } setCurrentItem({ ...currentItem, path: newPath }) } } const handleHover = (e: React.MouseEvent) => { const canvas = canvasRef.current if (canvas) { const rect = canvas.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const hovered = drawnItems.find((item) => { const itemX = item.path[0].x const itemY = item.path[0].y return Math.sqrt((x - itemX) ** 2 + (y - itemY) ** 2) <= 10 }) setHoveredItem(hovered ? hovered.id : null) } } const endDrawing = () => { setIsDrawing(false) if (currentItem && currentItem.path.length >= 2) { setDrawnItems([...drawnItems, currentItem]) } setCurrentItem(null) } const clearCanvas = () => { setDrawnItems([]) setCurrentItem(null) } return (

) } 7c:["$","$L86",null,{"chatId":"04IZE7U3IuZ","children":["$","$L87",null,{"data":{"@\"active-block\",\"04IZE7U3IuZ\",":{"id":"b_Q583ZT3dhbz","messageId":"uvoP2OOBHwRAnjVGBcOxBQEYGXSiK5wF","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"canvas-drawing-app","type":"code-project","project":"canvas-drawing-app"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"04IZE7U3IuZ\",":false,"":null},"children":"$L89"}]}]

About

Tags

Share

About

Tags

Share

More from mohammedzamakhan

More Templates Like This